<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">

        <!-- form表单 -->
       <el-form :inline="true" :model="form"  class="demo-form-inline"  >
         <el-row type="flex" justify="end"  >
           <el-col :span='21'>
           <el-form-item label="关键字" prop="keyword">
               <el-input v-model="form.keyword" placeholder="关键字"></el-input>
           </el-form-item>
           <el-form-item label="状态" prop="state">
           <el-select v-model="form.state" placeholder="状态" @change="changeselect"  >
                  <el-option
                      v-for="item in status"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
           </el-select>
           </el-form-item>
           <el-form-item>
                <el-button @click="empty">清除</el-button>
            </el-form-item>
           <el-form-item>
                <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item>
            </el-col>
            <el-col  :span='3'>
           <el-form-item>
                <el-button type="success" icon="el-icon-edit" @click="add">新增技巧</el-button>
            </el-form-item>
            </el-col>
            </el-row>
        </el-form>

         <el-alert
            :title="`数据一共${page.total}条`"
            type="info"
            show-icon>
         </el-alert>

         <!-- 表格 -->
             <el-table
               :data="tableData"
               style="width: 100%" >
                   <el-table-column type="index" label="序号" min-width="5%">
                   </el-table-column>
                   <el-table-column label="文章标题" min-width="27%" >
                     <template slot-scope="{row}">
                       <span style="margin-right: 5px">{{ row.title }}</span>
                        <i v-if="row.videoURL" @click="play(row)"  class="el-icon-film" style="color:rgb(63,52,255)" aria-hidden="true"></i>
                     </template>
                   </el-table-column>
                   <el-table-column prop="visits" label="阅读数" min-width="9%">
                   </el-table-column>
                   <el-table-column prop="username" label="录入人" min-width="13%">
                   </el-table-column>
                   <el-table-column prop="createTime" label="录入时间" min-width="19%" >
                     <template v-slot="{row}">
                       {{row.createTime | formatDate('yyyy-MM-dd hh:mm:ss')}}
                       </template>
                   </el-table-column>
                   <el-table-column prop="state" label="状态" min-width="10%" >
                     <template slot-scope="{row}">
                     {{ row.state ? "已启用" : "已禁用"}}
                     </template>
                   </el-table-column>
                   <el-table-column  label="操作" min-width="17%">
                        <template slot-scope="{row}">
                       <el-button type="text" @click="preview(row)">预览</el-button>
                       <el-button type="text" @click="isEnable(row)" >{{row.state?"禁用":"启用"}}</el-button>
                       <el-button type="text" @click="amend(row)" :disabled="row.state == 1" >修改</el-button>
                       <el-button type="text" @click="del(row)" :disabled="row.state == 1" >删除</el-button>
                       </template>
                   </el-table-column>
          </el-table>

          <!-- 分页 -->
           <el-row type="flex" justify="end" align="middle" style="height: 60px">
             <el-pagination
             background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="page.sizes"
                :current-page="page.page"
                :page-size="page.pagesize"
                layout=" prev, pager, next,sizes, jumper"
                 :total="page.total">
             </el-pagination>
          </el-row>
      </el-card>
    </div>

    <!-- 新增\修改 弹出层 -->
    <ArticlesAdd  :isShow.sync="isShow" :dialogForm.sync="dialogForm" :title="title" ></ArticlesAdd>

    <!-- 预览 弹出层 -->
    <ArticlesPreview :isOpen.sync="isOpen" :rowData="rowData"></ArticlesPreview>

    <!-- 视频 -->
    <div class="video" v-if="videoURL">
      <div class="videoClose"  @click="closeVideo" ><span  class="el-icon-close"></span></div>
      <div class="videobox">
        <video autoplay :src="videoURL"></video>
      </div>
    </div>

  </div>
</template>

<script>
import { status } from '@/api/hmmm/constants.js'
import { list, changeState, remove } from '@/api/hmmm/articles.js'
import ArticlesAdd from '@/module-hmmm/components/articles-add'
import ArticlesPreview from '@/module-hmmm/components/articles-preview'
export default {
  data () {
    return {
      form: {
        keyword: '',
        state: ''
      },
      dialogForm: {
        title: '',
        articleBody: '',
        videoURL: null,
        id: ''
      },
      title: '新增文章',
      page: {
        page: 1, // 默认页码
        pagesize: 10,
        total: 0, // 记录总数
        keyword: null,
        state: null,
        sizes: [10, 20, 30, 50]
      },
      state: null,
      tableData: [],
      isShow: false,
      isOpen: false,
      dialogVisible: false,

      rowData: {},
      videoURL: null
    }
  },
  components: {
    ArticlesAdd,
    ArticlesPreview
  },

  computed: {
    status () {
      return status
    }
  },

  created () {
    // 获取文章列表
    this.getArticlesList()
  },

  methods: {
    // 获取文章列表
    async getArticlesList () {
      //  调用接口
      const { data } = await list(this.page)
      // console.log(data)
      this.page.page = Number(data.page)
      this.page.pagesize = Number(data.pagesize)
      this.tableData = data.items
      this.page.total = data.counts
      return data.items.id
    },

    // page-Size每页条数 改变时触发
    handleSizeChange (val) {
      this.page.pagesize = val
      this.getArticlesList()
      // console.log(val)
    },

    // current-change当前页 改变时触发
    handleCurrentChange (val) {
      this.page.page = val
      this.getArticlesList()
    },

    // 清除
    empty () {
      this.form = {
        keyword: '',
        state: ''
      }
      this.search()
    },

    // 搜索
    search () {
      this.page.keyword = this.form.keyword
      this.page.state = this.state
      this.getArticlesList()
    },

    // select发生改变时触发
    changeselect (val) {
      this.state = val
      // console.log(val)
    },

    // 播放视频
    play (row) {
      // console.log(row.videoURL)
      this.videoURL = row.videoURL
    },

    // 关闭视频
    closeVideo () {
      this.videoURL = null
      // console.log(111)
    },

    // 修改
    amend (row) {
      this.title = '修改文章'
      this.dialogForm.title = row.title
      this.dialogForm.articleBody = row.articleBody
      this.dialogForm.videoURL = row.videoURL
      this.dialogForm.id = row.id
      this.isShow = true
    },
    // 预览
    preview (row) {
      this.isOpen = true
      this.rowData = row
      // console.log(row)
    },

    // 启用/禁用
    async isEnable (row) {
      // console.log(row)
      try {
        await changeState({
          id: row.id,
          // 控制后端 改变状态
          state: row.state === 1 ? 0 : 1
        })
        this.$message.success('操作成功')
        // 控制前端改变状态
        row.state = row.state === 1 ? 0 : 1
      } catch (e) {
        this.$message.error('请求错误!')
      }
      // this.getArticlesList()
    },

    // 删除
    del (row) {
      // this.dialogVisible = true
      // this.id = row
      this.$confirm('此操作将永久删除该文章，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.$message({ type: 'success', message: '删除成功!' })
        // 调用删除接口
        await remove(row)
        // 重铺页面
        this.getArticlesList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 新增技巧
    add () {
      this.isShow = true
    },
    updateForm () {
      this.dialogForm = {
        title: '',
        articleBody: '',
        videoURL: null,
        id: ''
      }
    }

  }
}
</script>

<style scoped>

.video{
  position: fixed;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.3);
 overflow: hidden;
 z-index: 9999;;
}
 .videoClose {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-50%, 0);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
  }
  .videobox {
    margin-top: 60px;
    width: 800px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    }
    video {
      width: 100%;
      height: 100%;
      }
</style>
